<template>

	<div class="cljk-table">
		<el-table :data="tableData" border style="width: 100%;" :height="tableH+'vh'"
			:header-row-style="{height:'30px'}" :header-cell-style="{
            textAlign: 'center',
            height: '30px',
        }" size="mini">

			<el-table-column prop="plateNumber" label="车牌号" width="130" fixed></el-table-column>
			<el-table-column prop="color" label="车牌颜色" width="100"></el-table-column>
			<el-table-column prop="company" label="所属组织" width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="operatType" label="车辆类型" width="120"></el-table-column>
			<el-table-column prop="alarmType" label="报警信息" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="driverName" label="驾驶员" width="100"></el-table-column>
			<el-table-column prop="status" label="等级" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.status===1">一级报警</span>
					<span v-if="scope.row.status===2">二级报警</span>
					<span v-if="scope.row.status===3">三级报警</span>
					<span v-if="scope.row.status===4">四级报警</span>
					<span v-if="scope.row.status===5">五级报警</span>
				</template>
			</el-table-column>
			<el-table-column prop="analyzeMode" label="报警来源" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.analyzeMode===1">平台</span>
					<span v-if="scope.row.analyzeMode===0">终端</span>
				</template>
			</el-table-column>
			<el-table-column prop="limited" label="道路限速" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.limited+' km/h'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="beginTime" label="报警开始时间" width="150"></el-table-column>
			<el-table-column prop="velocity" label="报警开始速度" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.velocity+' km/h'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="mileZongduan" label="报警开始位置" width="150">
				<template slot-scope="scope">
					<el-button @click="getLocation(scope.row)" size="mini" type="primary">获取位置</el-button >
				</template>
			</el-table-column>
			<el-table-column prop="keepTime" label="报警持续时间" width="120">
				<template slot-scope="scope">
					<span v-if="scope.row.keepTime">{{formatSecond(scope.row.keepTime)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="maxSpeed" label="最高时速" width="100">
				<template slot-scope="scope">
					<span>{{scope.row.maxSpeed+' km/h'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="endTime" label="报警结束时间" width="150"></el-table-column>
			<el-table-column prop="endSpeed" label="报警结束速度" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.endSpeed">{{scope.row.endSpeed+' km/h'}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="mileZongduan" label="报警结束位置" width="150">
				<template slot-scope="scope">
					<el-button @click="getLocation(scope.row)" size="mini" type="primary">获取位置</el-button >
				</template>
			</el-table-column>
			

		</el-table>

		<div>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.page" :page-sizes="[20, 50, 100, 200, 300, 400]" :page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
		</div>

	</div>
</template>

<script>
	import {getMonitorAlarmList} from '@/api/cljk.js';
	
	export default {

		name: 'beidouBJTable',
		props: {
			bottomHeight: {
				type: String,
				default: function() {
					return 22 + 'vh';
				},
				required: true
			},
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '22vh') {
					this.tableH = 12
				} else {
					this.tableH = 74
				}
			},
		},
		data() {
			return {
				tableData: [],
				tableH: 12,
				searchParam:{
					startTime:'',
					endTime:''
				},
				pageInfo: {
					page: 1,
					size: 20,
					total: 0,
				}
			}
		},
		methods: {
			
			formatSecond(time) {
			      const h = parseInt(time / 3600)
			      const minute = parseInt(time / 60 % 60)
			      const second = Math.ceil(time % 60)    
			 
			      const hours = h < 10 ? '0' + h : h
			      const formatSecond = second > 59 ? 59 : second
			      return `${hours > 0 ? `${hours}小时` : ''}${minute < 10 ? '0' + minute : minute}分${formatSecond < 10 ? '0' + formatSecond : formatSecond}秒`
			},
			
			handleSizeChange(val) {
				this.pageInfo.page=1
				this.pageInfo.size=val
				this.refreshList()
			},
			handleCurrentChange(val) {
				this.pageInfo.page=val
				this.refreshList()
			},
			refreshList(){
				
				getMonitorAlarmList({...this.searchParam,...this.pageInfo}).then(res=>{
					if(res.code===200){
						this.pageInfo.total=res.data.total
						this.tableData=res.data.data
					}
				}).catch(err=>{
					console.log(err)
				})
				
			}
		},
		mounted(){
			this.refreshList()
		}


	}
</script>

<style>
</style>